<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue监测原理</title>
  <script src="vue.js"></script>
</head>
<!--
Vue递归进行对象和属性数据代理进行监测
    Vue监视数据的原理：
        1.vue会监视data中所有层次的数据
        2.如何监视对象中的数据？
            通过setter实现监视，且要在new Vue时传入要监视的数据
            1.对象中后追加的属性，vue默认不做响应式处理
            2.如需为后添加的属性做响应式，请使用：
                Vue.set(target,'property',value)或
                vm.$set(target,'property',value)
        3.如何监视数组中的数据？
            同过包裹数组更新数据的方法实现，本质是：
                1.调用原生方法更新
                2.重新解析模板，进而更新页面
        4.在Vue中修改数组中的元素一定要用到如下方法：
            1.API：push(),pop(),splice().sort(),unshift(),shift(),reverse()
            2.Vue.set()或vm.$set
        5.注意的是：Vue.set和vm.set不能给vm或vm的根数据对象如_data添加属性
-->
<body>
<div id="root">
    <button @click="stu.age++">年龄加一</button><br>
    <button @click='addSex'>添加性别属性</button><br>
    <button @click="stu.sex=null">修改性别</button><br>
    <button @click="addFre">列表首位添加朋友</button><br>
    <button @click="changeName">修改第一个朋友的名字为张三</button><br>
    <button @click="changeFre">更换第二个朋友</button><br>
    <h2>学校名：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <h2>学生姓名：{{stu.name}}</h2>
    <h2>学生年龄：{{stu.age}}</h2>
    <h2 v-if="stu.sex">学生性别：{{stu.sex}}</h2>
    <h2>
        <ul>
            <li v-for="p in friends">姓名：{{p.name}}   年龄：{{p.age}} 性别：{{p.sex}}</li>
        </ul>
    </h2>

</div>
</body>
<script type="text/javascript">
    const  vm = new Vue({
        el:"#root",
        data:{
            name:"铁建",
            address:'Bj',
            stu:{
                name:'tom',
                age:30
            },
            friends:[
                {name:'jerry',age:15},
                {name:'betty',age:16}
            ]

        },
        methods:{
            addSex(){
                // Vue.set(this.stu,'sex','男')
                this.$set(this.stu,'sex','man')
            },
            addFre(){
                this.friends.unshift({name:'Althan',age:23})
            },
            changeName(){
                this.friends[0].name='张三'
            },
            changeFre(){
                // this.friends.splice(1,1,{name:'大牛',age:50})
                this.$set(this.friends,1,{name:'大牛',age:50})
            }
        }

    })
</script>

</html>